<template>
    <div id="companyDetail">
        <div id="c-name-box">
            <div class="name-container">
                <div class="name-left">
                    <div class="tx">
                        <img :src="'https://res.mashangu.com/'+company.img" alt="">
                    </div>
                    <div class="name-detail">
                        <p class="title">{{company.abbrName}}</p>
                        <p class="text">
                            {{company.financeName}} | {{company.scaleName}} | {{company.tradeName}}
                        </p>
                    </div>
                </div>
                <div class="name-detail right" style="display:inline-block;padding-top:42px;">
                    <p class="title">{{company.comPubNum}}</p>
                    <p class="text" style="margin-top:16px;">在招岗位</p>
                </div>
                <div class="c-tab-change">
                    <router-link :to="introPath">公司简介</router-link>
                    <router-link :to="recruPath">在招职位({{company.comPubNum}})</router-link>
                </div>
            </div>
        </div>
        <div id="msg-detail">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import {getCompanyList} from '../api/companyList'
export default {
    name:'companyDetail',
    data() {
        return {
            inPageIndex:0,
            pages:0,
            company:{},
            companyid:'',
            comName:'',
            introPath:'',
            recruPath:''
        }
    },
    created(){
        this.getParams();
    },
    methods: {
        getParams(){
            this.pages = this.$route.query.pages;
            if(this.pages == ''){
                this.comName = this.$route.query.comName;
                getCompanyList(1,null,null,null,null,this.comName).then(res => {
                    // console.log(res.data.data[0].abbrName);
                    this.company = res.data.data[0]
                    this.companyid = res.data.data[0].companyId;
                    this.introPath = '/companyIntro?pages=&comName=' + this.comName
                    this.recruPath = '/recruiting?comId=' + this.companyid;
                    // console.log(this.companyid)
                })
            }
            else{
                getCompanyList(this.pages).then(res => {
                    this.inPageIndex = this.$route.query.inPageIndex;
                    // console.log(res.data.data[this.inPageIndex]);
                    this.company = res.data.data[this.inPageIndex]
                    this.companyid = res.data.data[this.inPageIndex].companyId;
                    this.introPath = '/companyIntro?pages='+this.pages+'&inPageIndex=' + this.inPageIndex
                    this.recruPath = '/recruiting?comId=' + this.companyid;
                    // console.log(this.companyid)
                })
            }
		}
    },
}
</script>
<style>
.inline{
  display: inline-block;
  /* 解决div并排错位 */
  vertical-align:top;
}

#companyDetail{
    width: 1920px;
}

#c-name-box{
    width: 1920px;
    height: 214px;
    background: linear-gradient(135deg, #1136D8 0%, #101C94 100%);
    padding-top: 28px;
    box-sizing: border-box;
}

#c-name-box .name-container{
    width: 1184px;
    height: 214px;
    margin: 0 auto;
}

#c-name-box .name-left{
    display: inline-block;
}

#c-name-box .name-left .tx{
    width: 110px;
    height: 110px;
    border-radius: 6px;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    background-color: white;
}

#c-name-box .name-left .tx img{
    width: 110px;
}

.name-detail{
    color: white;
    display: inline-block;
    /* 解决div并排错位 */
    vertical-align:top;
    padding: 16px 24px;
}

.name-detail .title{
    font-size: 32px;
}

.text{
    font-size: 16px;
    opacity: 0.6;
    margin-top: 20px;
}

#msg-detail{
    width: 1920px;
}

.c-tab-change{
    margin-top: 28px;
}

.c-tab-change a{
    color: white;
    font-size: 20px;
    opacity: 0.6;
    margin-right: 40px;
}

.c-tab-change a.router-link-exact-active{
    color: #00FFEC;
    opacity: 1;
    border-bottom: 2px solid #00FFEC;
}

/* .c-tab-change .active{
  color: #00FFEC;
  opacity: 1;
  border-bottom: 2px solid #00FFEC;
} */
</style>